<!--企业会员中心-->
<template>
  <div class="Presonal">
    <!-- 头部 -->
    <div class="my_header">
      <div class="top1">会员中心</div>
      <img class="imgicon" src="static/imgs/icon_new.png" @click="gosysinfo">
      <div class="dot" v-show="infodata.message==1"></div>
    </div>

    <!-- 会员介绍 -->
    <ul class="mui-table-view head">
      <li class="mui-media">
        <a href="javascript:;">
          <img class=" mui-pull-left headpic" :src="infodata.head_img">
          <router-link to="/Perinfo">
            <div class="mui-media-body" @click="">
              <span class="title" v-text="infodata.nick_name"></span>
              <p class='mui-ellipsis addre'><img class="address" src="static/imgs/icon_adress.png" alt="">{{infodata.province}}/{{infodata.city}}
              </p>
            </div>
            <a class="mui-navigate-right"></a>
          </router-link>
        </a>

      </li>
    </ul>
    <!-- 查询次数 -->
    <div class="box">
      <div class="black_num">
        <div class="num">
          <span v-text="infodata.lost"></span>
          <div>我的上传</div>
        </div>
        <div class="num">
          <span v-text="infodata.inquiry"></span>

          <div>剩余查询次数</div>
        </div>
        <div class="num">
          <span v-text="infodata.record"></span>
          <div>查询记录</div>
        </div>
      </div>
    </div>
    <!-- 选择分类 -->

    <ul class="select">
      <li>
        <router-link to="/Enterprise">
          <img src="static/icon_pc/icon/right_buttom_2.png" alt="">
          <p>企业认证</p>
        </router-link>
      </li>
      <li>
        <router-link to="/paied">
          <img src="static/icon_pc/icon/right_buttom_3.png" alt="">
          <p>购买套餐</p>
        </router-link>
      </li>
      <li>
        <router-link to="/">
          <img src="static/icon_pc/icon/serch_btn.png" alt="">
          <p>搜索查询</p>

        </router-link>
      </li>
      <li>
        <router-link to="/blackname">
          <img src="static/icon_pc/icon/right_buttom_4.png" alt="">
          <p>上传黑名单</p>
        </router-link>
      </li>

    </ul>
    <ul class="select" style="margin-bottom: 10px">

      <li>
        <router-link to="/myaccount">
          <img src="static/icon_pc/icon/right_buttom_9.png" alt="">
          <p>我的钱包</p>
        </router-link>
      </li>

      <li>
        <router-link to="/accountsecury">
          <img src="static/icon_pc/icon/right_buttom_10.png" alt="">
          <p>账户安全</p>
        </router-link>
      </li>
      <li>
        <router-link to="/adminlist">
          <img src="static/icon_pc/icon/adninp.png" alt="">
          <p>管理员列表</p>
        </router-link>
      </li>
      <li class="lis"></li>
      <li class="lis"></li>
    </ul>

    <!-- 列表 -->
    <div class="menulist" style="margin-bottom: 10px">
      <ul class="list">
        <li class="lis">
          <router-link to="/myupload">
            <a> 我的上传
              <img src="static/imgs/icon_more.png" alt="">
            </a>
          </router-link>
        </li>
        <li class="lis" style="border-bottom: 1px solid #EFEFEF;">
          <router-link to="/searchrecord">
            <a> 查询记录
              <img src="static/imgs/icon_more.png" alt="">
            </a>
          </router-link>
        </li>
        <li class="lis">
          <router-link to="/buyrecord">
            <a> 购买记录
              <img src="static/imgs/icon_more.png" alt="">
            </a>
          </router-link>
        </li>

      </ul>
    </div>
    <div class="menulist" style="margin-bottom: 10px;">
      <ul class="list">
        <li class="lis">
          <router-link to="/makemoney">
            <a> 分享赚钱
              <img src="static/imgs/icon_more.png" alt="">
            </a>
          </router-link>
        </li>

      </ul>
    </div>
    <div class="menulist">
      <ul class="list">
        <li class="lis">
          <router-link to="/feedback">
            <a> 意见反馈
              <img src="static/imgs/icon_more.png" alt="">
            </a>
          </router-link>
        </li>
        <li class="lis">
          <router-link to="/aboutus">
            <a> 关于我们
              <img src="static/imgs/icon_more.png" alt="">
            </a>
          </router-link>
        </li>
        <li class="lis">
          <a>
            　
          </a>
        </li>
        <li class="lis">
          <a>
            　
          </a>
        </li>
      </ul>
    </div>

  </div>
</template>

<script>
  import axios from "axios";

  export default {
    name: 'index',

    data() {
      return {
        infodata: {}
      }
    },
    created: function () {
      var that = this

      $.ajax({
        type: "get",
        url: "http://zcapi.hrgsxt.cn/api/User/index",
        data: {
          token: localStorage.getItem("token")
        },
        cache: false,
        dataType: "json",
        success: function (data) {
          console.log(data)
          if (data.code == 200) {
            that.infodata = data.data;
            console.log(JSON.stringify(that.infodata) + "用户信息");

          }

        }
      });

    },
    methods: {
      gosysinfo() {
        var that = this;
        that.$router.push({
          path: './systeminfo'

        });
      }
    }
  }
</script>
<style scoped>
  html {
    background-color: #f8f8f8;
  }

  .dot {
    width: 0.15rem;
    height: 0.15rem;
    border-radius: 50%;
    background-color: #FF7E00;
    position: fixed;
    top: 0.18rem;
    right: 0.23rem;
  }

  .mui-navigate-right img {
    float: right;
    position: absolute;
    top: 0.8rem;
    width: 0.16rem;
    height: 0.28rem;
    right: 0.4rem;
  }

  .lis a {
    display: block;
  }

  .Presonal .my_header .top1 {
    margin-left: 0.38rem;
    margin-left: -.02rem;
  }

  .Presonal {
    margin-bottom: 2.5rem;
    margin-top: 0.88rem;
  }

  .Presonal .menulist:first-child {
    margin-bottom: 20px !important;
  }

  .menulist {
    width: 100%;
    background-color: #fff;
  }

  .menulist .list {
    margin-left: 0.35rem;
  }

  .menulist .list li:nth-child(2) {
    border-top: 1px solid #EFEFEF;
  }

  /* 头部 */

  .my_header {
    height: .88rem;
    background: rgba(0, 133, 240, 1);
    text-align: center;
    color: #fff;
    line-height: .88rem;
    position: fixed;
    z-index: 999;
    top: 0px;
    width: 100%;
  }

  .head .headpic {
    width: 1rem;
    height: 1rem;
    margin: 0px 10px 0px 15px;
    border-radius: 50%;
  }

  .imgicon {
    width: .38rem;
    height: .4rem;
    position: absolute;
    top: 50%;
    right: .24rem;
    margin-top: -.2rem;
  }

  .mui-media-body {
    margin-top: 7px;
  }

  .address {
    width: .2rem;
    height: .24rem;
    margin-right: .1rem;
  }

  .mui-table-view {
    height: 1.8rem;
    padding: .4rem 0;
  }

  .title {
    width: 1.22rem;
    height: .27rem;
    font-size: .28rem;
    font-weight: 500;
    color: rgba(51, 51, 51, 1);
  }

  .addre {
    font-size: .22rem;
    font-weight: 500;
    color: rgba(153, 153, 153, 1);
    line-height: .6rem;
  }

  .mui-navigate-right {
    font-size: .5rem;
  }

  .mui-table-view-cell > a:not(.mui-btn) {
    margin: -.22rem 0;
    margin-right: -.55rem;
    margin-left: -.4rem
  }

  /* 个人信息结束 */
  /* 查询次数开始 */

  .box {
    height: 1.2rem;
    background: rgba(255, 255, 255, 1);
    border-radius: 0.06rem;
    box-sizing: border-box;
    margin-bottom: 10px;
  }

  .black_num {
    display: flex;
    justify-content: space-around;
    text-align: center;
  }

  .black_num .num {
    box-sizing: border-box;
    width: 50%;
    height: 0.6rem;
    margin: 0.3rem 0px;
    line-height: 0.4rem;
  }

  .black_num .num:first-child,
  .black_num .num:nth-child(2) {
    border-right: 1px solid #efefef;
  }

  .black_num .num span {
    color: #ff7e00;
    font-weight: bold;
    font-size: .32rem;
  }

  .black_num .num div {
    color: #999;
    font-weight: medium;
    font-size: .2rem;
  }

  /* 查询次数结束 */
  /* 选择分类 */

  .select {
    height: 1.5rem;
    display: flex;
    justify-content: space-around;
    text-align: center;
    background-color: #fff;
  }

  .select li {
    padding: .24rem;
    line-height: .5rem;
    /* width: 25%; */
  }

  .select li img {
    width: 0.64rem;
    height: 0.64rem;
    color: #0085F0;
  }

  .select li p {
    color: #666;
    font-size: .24rem;
    font-weight: 500;
    margin-bottom: 0;
  }

  .lis {
    height: .88rem;
    line-height: .88rem;
    background-color: #fff;
    position: relative;
  }

  .lis a {
    color: #333;
    font-size: .3rem;
    font-weight: 500;
  }

  .lis a img {
    width: .14rem;
    height: .24rem;
    position: absolute;
    top: 50%;
    right: .29rem;
    margin-top: -.12rem;
  }
</style>
